<template>
	<div class="addsub w944">
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="container">
			<alert ref="alert"></alert>
			<labelAll ref="labelAll" :LabelsIds="LabelsIds" :LabelsNames="LabelsNames" v-on:labelNamesChanges="reveiceChange($event)"></labelAll>
			<div class="kc_add_line">
				<span class="tit">课程名称：</span>
				<el-input placeholder="请输入课程名称" v-model="courseName" class="inputLength"></el-input>
			</div>
			<div class="kc_add_line">
				<span class="tit">课程分类：</span> 
				<el-select v-model="courseColumnYi" placeholder="请选择一级分类" @change="selectChange(courseColumnYi,KcColumnYi)">
					<el-option v-for="item in KcColumnYi" :key="item.id" :label="item.columnName" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="courseColumn" placeholder="请选择子分类">
					<el-option v-for="item in KcColumnEr" :key="item.id" :label="item.columnName" :value="item.id">
					</el-option>
				</el-select>
			</div>
			<div class="kc_add_line arrow">
				<span class="tit">讲师名字：</span>
				<el-select v-model="lecture" placeholder="请选择或搜索" filterable :filter-method="selectSearch">
			        <el-option v-for="item in lectureoption" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
			   </el-select>
			</div>
			<div class="kc_add_line">
				<span class="tit">章节学分：</span>
				<el-input placeholder="0-5分" v-model="courseScore" style="ime-mode:disabled" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" @blur="getScore" id="score"></el-input> 
				<em>每个章节完成后学员获得的学分奖励</em>
			</div>
			<div class="kc_add_line">
				<div style="overflow: hidden;">
					<span class="tit" style="float: left;">课程标签：</span>
					<div class="labelFour"><span v-for="item in this.LabelsNames">{{item}}</span></div>
					<a @click="openLabel" class="openLabel">选择标签</a>
				</div>
				<p class="labelWarn">最多可选四个标签</p>
			</div>
			<div class="kc_add_line" v-if="isopen==1">
				<span class="tit">观看权限：</span>
				<el-checkbox-group v-model="checkedCities" style="display: inline-block;" @change="selectOptionLevel">
    				<el-checkbox v-for="item in optionLevel" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
 				</el-checkbox-group>
			</div>
			<div class="addSubImg">
				<span class="tit">列表图片：</span>
				<div class="updownvideob">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
						<img v-if="courseImg" :src="courseImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em>建议尺寸为320*180像素大小小于1M</em>
				</div>
			</div>
			<div class="addSubVideo style">
				<span class="tit">课程视频：</span>
				<em>提示本地上传支持1500M以内</em>
				<el-form style="height: auto;">
					<el-form-item v-for="(item, index) in localVideoVoList" :key="index">
						<div class="updownvideo">
							<em v-model="index"></em>
							<input type="text" v-model="item.videoIndex" class="num" maxlength="20"/>
							<el-input v-model="item.videoDesc" class="text"></el-input>
							<em v-model="item.videoName" v-show="item.nameBlock" class="ceshiNm" style="position: absolute;top: -5px;left: 585px;background: #fff;display: block;width: 75px;height: 40px;color:#000;z-index:999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.videoName}}</em>
							<input type="file" id="fileUpload" @click="selectIndex(index)" @change="fileChange($event)" class="upload-demo">
							<button type="button" @click="authUpload(index)" :disabled="item.uploadDisabled" style="position: absolute;top: 5px;left: 666px;width: 72px;">开始上传</button>
							<p class="progress" style="position: absolute;top: 0;left: 753px;height: 28px;line-height: 28px;">上传进度:<i id="auth-progress">{{item.authProgress}}</i>%</p>
							<span v-show="item.guanbi" @click="refrash(index)" style="font-size: 18px;color: #666;position: absolute;top: -6px;right: 18px;cursor: pointer;">&#10005;</span>
						</div>
					</el-form-item>
				</el-form>
				<a @click="goAddVideo(index)" style="font-size: 14px;color: #44CEF6;margin: 22px 0 0 550px;cursor: pointer;">继续添加</a>
			</div>
			<div class="addSubJieshao">
				<span style="margin-bottom: 25px;display: block;" class="tit">课程介绍：</span>
				<vue-ueditor-wrap v-model="courseDesc" :config="myConfig" style="margin-left: 74px;"></vue-ueditor-wrap>
			</div>
			<div class="footerButton">
				<a @click="checkSave()" v-if="this.nowType!='seen'" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel" v-if="this.nowType!='seen'">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from 'axios';
	import alert from '../../components/Alert.vue';
	import labelAll from '../../components/label.vue';
	export default {
		data() {
			return {
				LabelsIds:[],
				LabelsNames:[],
				labelType:'subject',
				isopen:0,
				clickLock:true,
				nowType: 'add',
				checkedCities:[],
				checkedSelectionIds:[], //权限Ids
        		skills: '',
				selectedItem: [],
				selectedId: [],
				subjects: [],
				index: 0, //点击选择视频时的行下标
				fileUpdataIndex:0,//点击开始上传时的行下标
				isDisabled:true,
				uploadName: '',
				id: '',
				courseName: '',
				nickname: '',
				speakerId: '',
				learnPoint: '',
				courseScore: '',
				columnNameYi: '',
				columnNameEr: '',
				courseColumnYi: '',
				courseColumn: '',
				courseImg: '',
				updateTitle: '新增课程',
				lecture:'',
				lectureoption: [],
				lectureoptionCopy: [],
				KcColumnYi: [],
				KcColumnEr: [],
				clicktIdAndName: [],//识别点击选择文件的是第几行
				level: '',
				courseDesc: '',
				values: '',
				localVideoVoList: [{
					videoIndex: '',
					videoDesc: '',
					videoName: '',
					aliyunVideoId: '',
					guanbi: true,
					authProgress :0,
					nameBlock:false,
					uploadDisabled: true
				}],
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840',
				},
				level:'',
				optionLevel:[],
				timeout: '60000',
				partSize: '1048576',
				parallel: '5',
				retryCount: '3',
				retryDuration: '2',
				region: 'cn-shanghai',
				userId: '1585664211304336', //1303984639806000
				file: null,
				authProgress: 0,
				uploadDisabled: true,
				resumeDisabled: true,
				pauseDisabled: true,
				uploader: null,
				statusText: '',
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId},
			}
		},
		methods: {
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑课程";
				}else if(routerParams == 'seen') {
					this.nowType = 'seen';
					this.updateTitle = "预览课程";
				}else{
					this.nowType = 'add';
				};
			},
			selectSearch(val){
				this.value = val;
		        if (val) { 
		            this.lectureoption = this.lectureoptionCopy.filter((item) => {
		                if (!!~item.nickname.indexOf(val) || !!~item.nickname.toUpperCase().indexOf(val.toUpperCase())) {
		                	return true
		                }
		            })
		        }else{
		          this.lectureoption = this.lectureoptionCopy;
		        }
			},
			//判断点击的是第几行
			selectIndex(index) {
				this.index = index;
			},
			// 开关状态改变
			changeSwitch(value) {
				this.freeTrade = value;
			},
			beforeVideoUpload(file) {
				this.localVideoVoList[this.index].videoName = file.name;
			},
			refrash(index) {                          
				if(index == 0) {
					this.localVideoVoList[index].videoIndex = '';                    
					this.localVideoVoList[index].videoDesc = '';                    
					this.localVideoVoList[index].videoName = '';   
					this.localVideoVoList[index].authProgress = 0;  
					this.localVideoVoList[index].aliyunVideoId =''; 
					this.localVideoVoList[index].uploadDisabled=true;
					//this.localVideoVoList[index].videoUrl = '';                    
					this.localVideoVoList[index].guanbi = false;    
					this.file = null;           
					document.getElementById("fileUpload").value=''; //第一行点X，就吧input 框值设为空
				} else {                    
					this.localVideoVoList.splice(index, 1);                
				}            
			},
			//点击添加一行
			goAddVideo() {
				var s=this.localVideoVoList.length;
				this.localVideoVoList.push({
					videoDesc:'',
					videoName: '',
					//videoUrl: '',
					videoIndex:'',
					authProgress:0,
					guanbi:true,
					uploadDisabled:true,
					//freeTrade:1
				});
			},
			checkItem() {
				if(this.level != 'D') {
					this.learnPoint = 0;
				}else{
					this.learnPoint = this.learnPoint;
				}
			},
			getScore(){
				if(this.courseScore>5){
					this.$refs.alert.show({
						alertText: '学分最大值为5！',
						alertSubmit: function() {
							alertStatus: 0
						}
					});
					$('#score').focus();
				}
			},
			openLabel(){
				this.$refs.labelAll.labelTable=true;
			},
			reveiceChange(event){
				this.LabelsIds = event.arg1;
	        	this.LabelsNames = event.arg2;
	     	},
			saveCourse() {
				let that = this;
				var arr = this.LabelsIds.concat(this.checkedSelectionIds);
				let insertCourse = {
					rootcompanyid:1,
					courseName: that.courseName,
					courseColumnYi: that.courseColumnYi,
					courseColumn: that.courseColumn,
					speakerId: that.lecture,
					courseImg: that.courseImg,
					courseScore: that.courseScore,
					learnLevel: 'A', // 课程等级
					learnPoint: that.learnPoint,
					courseDesc: that.courseDesc,
					localVideoVoList: that.localVideoVoList,
					courseType:1,
					kcCourseLabelCheckboxVoList:arr
				};
				if(this.clickLock==true){
					this.clickLock = false;
					this.$ajax({
						url: this.$root.jifuUrl + '/mns/kcCourse/addKcCourseFront',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: insertCourse,					
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name:'manager'
									});
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			editCourse() {
				//编辑课程
				let that = this;
				var arr = this.LabelsIds.concat(this.checkedSelectionIds);
				let updataCourse = {
					id: that.id,
					rootcompanyid:1,
					courseName: that.courseName,
					courseColumnYi: that.courseColumnYi,
					courseColumn: that.courseColumn,
					speakerId: that.lecture,
					courseImg: that.courseImg,
					learnLevel: 'A', // 课程等级
					courseScore: that.courseScore,
					learnPoint: that.learnPoint,
					courseDesc: that.courseDesc,
					localVideoVoList: that.localVideoVoList,
					courseType:1,
					kcCourseLabelCheckboxVoList:arr
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/kcCourse/updateKcCourseFront',
					headers: {'ContentType': 'application/json; charset=utf-8'},
					data: updataCourse,
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功'});
							setTimeout(() =>{
								this.$router.push({
									name:'manager'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.saveCourse();
				}else if(this.nowType == 'edit') {
					this.editCourse();
				}
			},
			cancel() {
				this.$router.go(-1);
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.courseImg = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			getColumnList(){
				let columnType = [1];
				this.$rootFunction().columnListAdd({columnType});
			},
			getLabelType(){
				let permissType = 4;
				this.$rootFunction().userPermissions({permissType});
			},
			selectChange(courseColumnYi,KcColumnYi) {
				this.courseColumn='';
				this.KcColumnEr = '';
                this.KcColumnYi.forEach(element => {
                    if(element.id==courseColumnYi){
                        this.KcColumnEr = element.childList;
                    }
                });
            },
			//获取属性的id
			selectOptionLevel(){
				this.checkedSelectionIds = [];//复选框选中id
				for(var i = 0;i<this.checkedCities.length;i++){
					this.optionLevel.forEach(element => {
						if(element.id==this.checkedCities[i]){
							this.checkedSelectionIds.push({id:element.id});
						}
					});
				}
			},
			spliceName(index){
				this.selectedItem.splice(index, 1);
				this.selectedId.splice(index,1);
				this.num = this.selectedItem.length;
			},
			changeCss(item) {
				let i=this.selectedItem.indexOf(item.name);
				if(i<0){
					this.num = this.selectedItem.length;
					if(!item.selected && this.num < 4) {
						this.selectedItem.push(item.name);
						this.selectedId.push({id:item.id});
					}else if(this.num = 4){
						alert('最多选择四项！')
					}
				}else{
					alert("此项技能已选！")
				}
			},
			fileChange(e) {
				this.file = e.target.files[0]
				if(!this.file) {
					alert("请先选择需要上传的文件!")
					return
				}
				var Title = this.file.name
				//根据文件名，查找localVideoVoList下标
				this.clicktIdAndName[this.index] = {index:this.index,videoName:Title,file:this.file};
			//	var userData = '{"Vod":{}}'
				if(this.uploader) {
					this.uploader.stopUpload()
					this.authProgress = 0
					this.statusText = ""
				}
				this.uploader = this.createUploader()
				this.localVideoVoList[this.index].uploadDisabled= false;
				this.pauseDisabled = true
				this.resumeDisabled = true
			},
			authUpload(index) {
				//首先判断点击的是哪行
				this.fileUpdataIndex = index;
				var userData = '{"Vod":{}}'
				console.log(userData,this.clicktIdAndName[index])
				this.uploader.addFile(this.clicktIdAndName[index].file, null, null, null, userData)

				// 然后调用 startUpload 方法, 开始上传
				if(this.uploader !== null) {
					this.uploader.startUpload()
					this.pauseDisabled = false
				}
			},
//			 暂停上传
			pauseUpload() {
				if(this.uploader !== null) {
					this.uploader.stopUpload()
					this.resumeDisabled = false
					this.pauseDisabled = true
				}
			},
//			 恢复上传
			resumeUpload() {
				if(this.uploader !== null) {
					this.uploader.startUpload()
					this.resumeDisabled = true
					this.pauseDisabled = false
				}
			},
			createUploader(type) {
				let self = this
				let uploader = new AliyunUpload.Vod({
					timeout: self.timeout || 60000,
					partSize: self.partSize || 1048576,
					parallel: self.parallel || 5,
					retryCount: self.retryCount || 3,
					retryDuration: self.retryDuration || 2,
					region: self.region,
					userId: self.userId,
					// 添加文件成功
					addFileSuccess: function(uploadInfo) {
						self.resumeDisabled = false
						self.statusText = '添加文件成功, 等待上传...'
					},
					// 开始上传
					onUploadstarted: function(uploadInfo) {
						if(!uploadInfo.videoId) {
							let that = this;
//							let createUrl = 'http://192.168.14.111:8089/uploadV?Title=' + uploadInfo.file.name;
							let createUrl = 'http://www.h3clearning.com/huathree-back/uploadV?Title=' + uploadInfo.file.name;
							axios.get(createUrl).then(({data}) => {
								let uploadAuth = data.data.UploadAuth;
								let uploadAddress = data.data.UploadAddress;
								let aliyunVideoId = data.data.VideoId;
								let videoName = uploadInfo.file.name;
								uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, aliyunVideoId, videoName);
							})
							self.statusText = '文件开始上传...'
						} else {
//							let refreshUrl = 'http://192.168.14.111:8089/refreshVideo?VideoId=' + uploadInfo.videoId;
							let refreshUrl = 'http://www.h3clearning.com/huathree-back/refreshVideo?VideoId=' + uploadInfo.videoId;
							axios.get(refreshUrl).then(({data}) => {
								let uploadAuth = data.data.UploadAuth
								let uploadAddress = data.data.UploadAddress
								let videoId = data.data.VideoId
								uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
							})
						}
					},
					// 文件上传成功
					onUploadSucceed: function(uploadInfo) {
						let that = this;
						self.statusText = '文件上传成功!';
						self.localVideoVoList[self.fileUpdataIndex].videoName= uploadInfo.file.name;
						self.localVideoVoList[self.fileUpdataIndex].aliyunVideoId= uploadInfo.videoId;
						self.localVideoVoList[self.fileUpdataIndex].guanbi = true;
						self.localVideoVoList[self.fileUpdataIndex].uploadDisabled= true;
					},
					// 文件上传失败
					onUploadFailed: function(uploadInfo, code, message) {
						self.statusText = '文件上传失败!'
					},
					// 取消文件上传
					onUploadCanceled: function(uploadInfo, code, message) {
					self.statusText = '文件已暂停上传'
					},
					// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
					onUploadProgress: function(uploadInfo, totalSize, progress) {
						let progressPercent = Math.ceil(progress * 100);
						self.localVideoVoList[self.fileUpdataIndex].authProgress= progressPercent;
						self.statusText = '文件上传中...'
					},
					// 上传凭证超时
					onUploadTokenExpired: function(uploadInfo) {
//						let refreshUrl = 'http://192.168.14.111:8089/refreshVideo?VideoId=' + uploadInfo.videoId;
						let refreshUrl = 'http://www.h3clearning.com/huathree-back/refreshVideo?VideoId=' + uploadInfo.videoId;
						axios.get(refreshUrl).then(({data}) => {
							let uploadAuth = data.data.UploadAuth
							uploader.resumeUploadWithAuth(uploadAuth)
						})
						self.statusText = '文件超时...'
					},
					// 全部文件上传结束
					onUploadEnd: function(uploadInfo) {
						self.statusText = '文件上传完毕'
					}
				})
				return uploader;
			}
		},
		components: {
			alert,
			labelAll
		},
		mounted: function() {
			this.getParams();
			this.$rootFunction().getRootCompangIdStatus();
			this.getColumnList();
			this.getLabelType();
			this.$rootFunction().getAllLecture();
			if(this.nowType == "edit"||this.nowType == 'seen'){
				console.log('306', this.nowType, this.$root.managerMsg);
				this.id = this.$root.managerMsg.id;
				this.courseName = this.$root.managerMsg.courseName;
				this.lecture = this.$root.managerMsg.speakerId;
				this.nickname = this.$root.managerMsg.nickname;
				this.courseColumnYi = this.$root.managerMsg.courseColumnYi;
				this.columnNameYi = this.$root.managerMsg.columnNameYi;
				this.courseColumn = this.$root.managerMsg.courseColumn;
				this.columnNameEr = this.$root.managerMsg.columnNameEr;
				this.courseDesc = this.$root.managerMsg.courseDesc;
				this.courseScore = this.$root.managerMsg.courseScore;
				this.learnPoint = this.$root.managerMsg.learnPoint;
				this.courseImg = this.$root.managerMsg.courseImg;
				this.level = this.$root.managerMsg.learnLevel;
				this.courseType = 1;
				this.KcColumnYi.forEach(element => {
                    if(element.id==columnNameYi){
                        this.KcColumnEr=element.childList
                    }
                });
				var aaalist = this.$root.managerMsg.kcCourseLabelCheckboxMap[3];
				var bbblist = this.$root.managerMsg.kcCourseLabelCheckboxMap[4];
				if(aaalist!=null){			
					aaalist.forEach(element => {
						if(element.type==3){
							this.LabelsNames.push(element.name);
							this.LabelsIds.push({id:element.id})
						}
					});
				}
				if(bbblist!=null){
					bbblist.forEach(element => {
						if(element.type==4){
							this.checkedCities.push(element.id);
							this.checkedSelectionIds.push({id:element.id});
						}
					});
				};
				
				this.localVideoVoList = this.$root.managerMsg.localVideoVoList;
				if(this.localVideoVoList == null || this.localVideoVoList.length == 0) {
					this.localVideoVoList.push({
						videoIndex: 0,
						videoDesc: '',
						videoName: '',
						nameBlock:false,
						uploadDisabled:true,
						//videoUrl: '',
						guanbi: false,
					});
				} else {
					this.localVideoVoList.forEach(element => {
						element.guanbi = true
						element.nameBlock = true
						element.authProgress = 100
						element.uploadDisabled=true
					});
				}
			}
		}
	}
	
</script>

<style>
	.addsub .kc_add_line .el-select,.addsub .kc_add_line .el-select .el-input{width: 148px;}
	.addsub .kc_add_line .el-input.inputLength,.addsub .kc_add_line .el-input.inputLength input{width: 300px;}
	.addsub .kc_add_line,.addsub .skillContent{margin-bottom: 25px;}
	.addsub .teacherSkills{margin-bottom: 0!important;}
	.addsub .el-input__icon{line-height: 33px;height: 33px;}
	.addsub .el-checkbox{margin-right: 12px!important;}
	.addsub .el-form {height:auto!important;}
	.addsub .el-form .el-form-item {height:35px;overflow:hidden;}
	.addsub .updownvideo {width:886px;height:34px;overflow:hidden;position:relative;}
	.addsub .updownvideo .text.el-input {position:absolute;top:0;left:174px;}
	.addsub .updownvideo .upload-demo {position:absolute;top:5px;left:510px;width:154px;}
	.addsub .updownvideo .el-switch {position:absolute;top:7px;left:808px;}
	.addsub .el-switch__label * {font-size:12px!important;color:#fff}
	.addsub .updownvideo .num {width:66px;text-align:center;height:31px;line-height:31px;border:1px solid #ccc;border-radius:5px;font-size:14px;color:#333;display:inline-block;position:absolute;top:0;left:86px;outline:none;}
	.addsub .updownvideo .text,.addsub .updownvideo .text input {width:308px;height:34px;line-height:34px;padding-left:16px;outline:none;}
	.addsub .upload-demo {width:445px;position:relative;}
	.addsub .upload-demo,.addsub .el-upload {width:100px;height:34px;display:inline-block;/*float:left;*/}
	.addsub .upload-demo span {width:100px;height:34px;line-height:34px;display:inline-block;background:#44CEF6;border-radius:5px;}
	.addsub .el-button--primary.is-active,.addsub .el-button--primary:active {background:#44CEF6;border:none}
	.addsub .el-button--small,.addsub .el-button--small.is-round {padding:0;}
	.addsub .upload-demo span {border:none;font-size:14px!important;color:#fff!important;}
	.addsub .upload-demo .el-button {border:none;}
	.addsub .addSubVideo {height:auto!important;overflow:hidden;}
	.addsub .addSubVideo.style .el-form {width:auto;position:relative;margin-top:20px;height:auto;min-height:35px;}
	.addsub .el-upload-list {position:absolute;top:0;left:126px;}
	.addsub .el-upload-list__item-name {font-size:14px;color:#333;}
	.addsub .el-upload-list__item:first-child {margin-top:5px;}
	.addsub .addSubJieshao a {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0;border:0;margin-top:165px;}
	.addsub .addSubJieshao a:hover {background:#31c7f2;}
	.addsub .container {position:relative;}
	.addsub .kc_add_line .el-input,.addsub .kc_add_line .el-input input {width:322px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addsub .tit {font-size:16px;color:#333;height:33px;line-height:33px;}
	.addsub .kc_add_line .el-input input {width:148px;height:34px;display:inline-block;font-size:14px;color:#333;position:relative;left:-5px;}
	.addsub .kc_add_line .el-input,.addsub .kc_add_line .el-input input {width:148px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addsub .learnPoint .el-input,.addsub .learnPoint .el-input input {width:148px;height:34px;display:inline-block;font-size:14px;color:#333;padding-right:0px;}
	.addsub .el-rate {display:inline-block;height:34px;line-height:28px;margin-right:24px;}
	.addsub .addSubScore em,.addsub .addSubVideo em {font-size:14px;color:#ccc;font-style:normal;}
	.addsub .kc_add_line em {font-size:14px;color:#ccc;font-style:normal;}
	.addsub .el-rate__icon {font-size:30px;}
	.addsub .el-rate__icon.hover {-webkit-transform:none!important;transform:none!important;}
	.addsub .addSubImg {height:93px!important;position:absolute;top:0;left:500px;width:242px;}
	.addsub .addSubImg span {position:absolute;top:5px;left:0;}
	.addsub .addSubImg .el-upload-list {position:absolute;top:0;left:126px;}
	.addsub .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:167px;height:93px;}
	.addsub .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.addsub .avatar-uploader-icon {font-size:28px;color:#8c939d;width:167px;height:73px;text-align:center;background:#f2f2f2;padding-top:20px;}
	.addsub .avatar {width:167px;height:93px;display:block;}
	.addsub .updownvideob {position:absolute;top:0;left:76px;}
	.addsub .updownvideob,.addsub .avatar-uploader {width:167px;height:93px;}
	.addsub .updownvideob em {font-style:normal;font-size:12px;color:#ccc;margin-top:8px;display:block;line-height:16px;}
	.addsub span.el-rate__text {font-size:14px;color:#999!important;}
	.addsub .videoName {width:80px;height:34px;line-height:34px;}
	.addsub .videoName .el-input__inner {border:0;padding:0;}
	.addsub .teacherSkills {position:relative;height:34px;line-height:34px;}
	.addsub .skillDetail {width:450px;height:32px;line-height:32px;border:1px solid #ccc;border-radius:5px;position:absolute;top:0;left:80px;}
	.addsub .skillDetail i {font-style:normal;color:#ccc;position:relative;top:-4px;margin-left:4px;cursor:pointer;}
	.addsub .skillDetail span,.addsub .skillContent span {color:#44CEF6!important;font-size:14px;width:auto!important;margin-left:15px;cursor:pointer;}
	.addsub .skillContent {margin-left:80px;height:auto!important;width:607px;line-height:28px}
	.arrow .el-input__suffix{top: 3px!important;}
	.kc_add_line .labelFour{width: 400px;height: 33px;line-height: 33px;border: 1px solid #ccc;border-radius: 5px 0 0 5px;display: inline-block;box-sizing: border-box;float: left;}
	.kc_add_line .labelFour span{position: relative;top: -2px;font-size: 14px;color: #333;margin-left: 16px;display: inline-block;}
	.kc_add_line .openLabel{float: left;}
	.kc_add_line .labelWarn{font-size: 12px;color: #999;margin-left: 87px;margin-top:10px}
	.kc_add_line a{width: 80px;height: 33px;line-height: 33px;display: inline-block;color: #fff;margin-left: -5px;background: #44CEF6;text-align: center;font-size: 14px;border-radius: 0 5px 5px 0;box-sizing: border-box;cursor: pointer;}
</style>